<template>
  <div class="articles">
    <div class="container">
      <div class="left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="起火单位（地址）">
            <el-input v-model="form.fireName" />
          </el-form-item>
          <el-form-item label="提取日期">
            <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
          <el-collapse v-model="activeNames" class="collapse-box">
            <el-collapse-item name="0">
              <template slot="title">
                <div class="collapse-item-title" flex="cross:center">物品信息</div>
              </template>
              <div class="collapse-body">
                <div class="btns" flex="main:right">
                  <el-button v-if="!isEdit" @click="isEdit = true">编辑</el-button>
                  <div v-else>
                    <el-button>保存</el-button>
                    <el-button @click="isEdit = false">取消</el-button>
                  </div>
                </div>
                <el-table :data="tableData" height="250" border style="width: 100%">
                  <el-table-column prop="name" label="序号" />
                  <el-table-column prop="company" label="名称" />
                  <el-table-column prop="date" label="编号" />
                  <el-table-column prop="sign" label="提取部位" />
                  <el-table-column prop="sign" label="规格" />
                  <el-table-column prop="sign" label="数量" />
                  <el-table-column prop="sign" label="特征" />
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="1">
              <template slot="title">
                <div class="collapse-item-title" flex="cross:center">提取人信息</div>
              </template>
              <div class="collapse-body">
                <div class="btns" flex="main:right">
                  <el-button v-if="!isEdit" @click="isEdit = true">编辑</el-button>
                  <div v-else>
                    <el-button>保存</el-button>
                    <el-button @click="isEdit = false">取消</el-button>
                  </div>
                </div>
                <el-table :data="tableData" height="250" border style="width: 100%">
                  <el-table-column prop="name" label="姓名" width="180" />
                  <el-table-column prop="company" label="工作单位" />
                  <el-table-column prop="date" label="日期" width="200" />
                  <el-table-column prop="sign" label="签名" width="300" />
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <div class="collapse-item-title" flex="cross:center">证人或当事人</div>
              </template>
              <div class="collapse-body">
                <div class="btns" flex="main:right">
                  <el-button v-if="!isEdit" @click="isEdit = true">编辑</el-button>
                  <div v-else>
                    <el-button>保存</el-button>
                    <el-button @click="isEdit = false">取消</el-button>
                  </div>
                </div>
                <el-table :data="tableData" height="250" border style="width: 100%">
                  <el-table-column prop="name" label="姓名" width="180" />
                  <el-table-column prop="company" label="身份证件号码" />
                  <el-table-column prop="address" label="单位或住址" width="200" />
                  <el-table-column prop="sign" label="联系电话" />
                  <el-table-column prop="sign" label="日期" />
                  <el-table-column prop="sign" label="签名" />
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
      <div class="right" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Articles',
  data() {
    return {
      form: {},
      tableData: [{}],
      isEdit: false,
      activeNames: ['0', '1', '2']
    }
  }
}
</script>

<style lang="scss">
.articles {
  .container {
    .left {

    }
    .right {
    }
  }
}
.collapse-box {
  .collapse-item-title {
    padding: 10px;
    height: 100%;
    font-size: 20px;
    font-weight: bold;
    &::before {
      content: '';
      display: block;
      width: 6px;
      height: 100%;
      background-color: #2979ff;
      margin-right: 10px;
    }
  }
  .collapse-body {
    padding: 10px 20px;
    .btns {
      margin-bottom: 10px;
    }
  }
}
</style>
